<template>
  <view class="container">
    <!-- 成员列表 -->
    <view class="member-list">
      <view class="section-header">
        <text class="section-title">成员列表</text>
        <text class="tip-text">左滑可删除成员</text>
      </view>
      
      <view v-if="familyMembers.length === 0" class="empty-state">
        <image src="/static/icons/empty-family.png" class="empty-icon"></image>
        <text class="empty-text">暂无家庭成员，请点击下方按钮添加</text>
      </view>
      
      <view v-else>
        <view v-for="(member, index) in familyMembers" :key="index" class="member-item-wrapper">
          <movable-area class="movable-area">
            <movable-view class="movable-view" direction="horizontal" :x="member.x" 
                          @change="handleMovableChange($event, index)" 
                          @touchend="handleTouchEnd($event, index)">
              <view class="member-item" @tap="showMemberDetail(member)">
                <view class="member-avatar" :style="{ backgroundColor: getAvatarColor(member.name) }">
                  {{ member.name.substring(0, 1) }}
                </view>
                <view class="member-info">
                  <view class="member-name-row">
                    <text class="member-name">{{ member.name }}</text>
                    <text class="member-relation">{{ member.relation }}</text>
                  </view>
                  <text class="member-phone">{{ formatPhone(member.phone) }}</text>
                </view>
              </view>
              <view class="delete-btn" @tap="deleteMember(index)">删除</view>
            </movable-view>
          </movable-area>
        </view>
      </view>
    </view>
    
    <!-- 添加成员按钮 -->
    <view class="add-btn" @tap="showAddMemberModal">
      <text class="iconfont icon-add"></text>
      <text>添加家庭成员</text>
    </view>
    
    <!-- 添加成员弹窗 -->
    <view class="modal" v-if="showModal">
      <view class="modal-mask" @tap="hideModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">{{ isEdit ? '编辑成员' : '添加成员' }}</text>
          <text class="modal-close" @tap="hideModal">×</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">姓名</text>
            <input class="form-input" v-model="formData.name" placeholder="请输入成员姓名" />
          </view>
          <view class="form-item">
            <text class="form-label">关系</text>
            <picker class="form-picker" :range="relationOptions" @change="handleRelationChange">
              <view class="picker-value">{{ formData.relation || '请选择与户主关系' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="form-label">手机号</text>
            <input class="form-input" v-model="formData.phone" placeholder="请输入手机号码" type="number" maxlength="11" />
          </view>
          <view class="form-item">
            <text class="form-label">身份证号</text>
            <input class="form-input" v-model="formData.idCard" placeholder="请输入身份证号码" maxlength="18" />
          </view>
        </view>
        <view class="modal-footer">
          <button class="cancel-btn" @tap="hideModal">取消</button>
          <button class="confirm-btn" @tap="confirmAddMember">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      familyMembers: [
        {
          id: 1,
          name: '王建国',
          relation: '户主',
          phone: '13812345678',
          idCard: '110101199001011234',
          x: 0
        },
        {
          id: 2,
          name: '李秀英',
          relation: '配偶',
          phone: '13987654321',
          idCard: '110101199101011234',
          x: 0
        },
        {
          id: 3,
          name: '王瑞',
          relation: '子女',
          phone: '13712345678',
          idCard: '110101201001011234',
          x: 0
        }
      ],
      relationOptions: ['户主', '配偶', '父母', '子女', '祖父母', '外祖父母', '兄弟姐妹', '其他'],
      showModal: false,
      isEdit: false,
      editIndex: -1,
      formData: {
        name: '',
        relation: '',
        phone: '',
        idCard: ''
      },
      deleteButtonWidth: 160
    }
  },
  methods: {
    formatPhone(phone) {
      if (!phone) return '';
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    getAvatarColor(name) {
      const colors = [
        '#6a11cb', '#2575fc', '#ff9500', '#ff5e3a', 
        '#34c759', '#007aff', '#5856d6', '#af52de'
      ];
      const index = name.charCodeAt(0) % colors.length;
      return colors[index];
    },
    showMemberDetail(member) {
      // 查看成员详情
      uni.showToast({
        title: `查看${member.name}的详细信息`,
        icon: 'none'
      });
    },
    handleMovableChange(e, index) {
      this.familyMembers[index].x = e.detail.x;
    },
    handleTouchEnd(e, index) {
      const x = this.familyMembers[index].x;
      if (x < -this.deleteButtonWidth / 2) {
        this.familyMembers[index].x = -this.deleteButtonWidth;
      } else {
        this.familyMembers[index].x = 0;
      }
    },
    deleteMember(index) {
      uni.showModal({
        title: '提示',
        content: `确定要删除家庭成员"${this.familyMembers[index].name}"吗？`,
        success: (res) => {
          if (res.confirm) {
            this.familyMembers.splice(index, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          } else {
            this.familyMembers[index].x = 0;
          }
        }
      });
    },
    showAddMemberModal() {
      this.isEdit = false;
      this.formData = {
        name: '',
        relation: '',
        phone: '',
        idCard: ''
      };
      this.showModal = true;
    },
    hideModal() {
      this.showModal = false;
    },
    handleRelationChange(e) {
      this.formData.relation = this.relationOptions[e.detail.value];
    },
    confirmAddMember() {
      // 表单验证
      if (!this.formData.name) {
        return uni.showToast({
          title: '请输入成员姓名',
          icon: 'none'
        });
      }
      if (!this.formData.relation) {
        return uni.showToast({
          title: '请选择与户主关系',
          icon: 'none'
        });
      }
      if (!this.formData.phone || !/^1\d{10}$/.test(this.formData.phone)) {
        return uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        });
      }
      if (!this.formData.idCard || !/^\d{17}[\dXx]$/.test(this.formData.idCard)) {
        return uni.showToast({
          title: '请输入正确的身份证号码',
          icon: 'none'
        });
      }

      if (this.isEdit) {
        // 编辑成员
        this.familyMembers[this.editIndex] = {
          ...this.familyMembers[this.editIndex],
          name: this.formData.name,
          relation: this.formData.relation,
          phone: this.formData.phone,
          idCard: this.formData.idCard
        };
        uni.showToast({
          title: '编辑成功',
          icon: 'success'
        });
      } else {
        // 添加成员
        const newMember = {
          id: Date.now(),
          name: this.formData.name,
          relation: this.formData.relation,
          phone: this.formData.phone,
          idCard: this.formData.idCard,
          x: 0
        };
        this.familyMembers.push(newMember);
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        });
      }
      
      this.hideModal();
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding-bottom: 120rpx;
}

.member-list {
  margin: 30rpx 30rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background: #6a11cb;
      border-radius: 3rpx;
    }
  }
  
  .tip-text {
    font-size: 24rpx;
    color: #999;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
    opacity: 0.8;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    line-height: 1.5;
    text-align: center;
  }
}

.member-item-wrapper {
  width: 100%;
}

.movable-area {
  width: 100%;
  height: 140rpx;
}

.movable-view {
  width: calc(100% + 160rpx);
  height: 140rpx;
  display: flex;
}

.member-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f0f0;
  
  .member-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    margin-right: 20rpx;
    flex-shrink: 0;
  }
  
  .member-info {
    flex: 1;
    overflow: hidden;
    
    .member-name-row {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      .member-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-right: 16rpx;
      }
      
      .member-relation {
        font-size: 24rpx;
        color: #666;
        background-color: #f5f7fa;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
      }
    }
    
    .member-phone {
      font-size: 26rpx;
      color: #999;
    }
  }
}

.delete-btn {
  width: 160rpx;
  height: 100%;
  background-color: #ff3b30;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  flex-shrink: 0;
}

.add-btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right, #6a11cb, #2575fc);
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 6rpx 20rpx rgba(106, 17, 203, 0.3);
  
  .iconfont {
    margin-right: 10rpx;
    font-size: 36rpx;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .modal-close {
      font-size: 40rpx;
      color: #999;
      padding: 10rpx;
    }
  }
  
  .modal-body {
    padding: 30rpx;
    max-height: 60vh;
    overflow-y: auto;
    
    .form-item {
      margin-bottom: 30rpx;
      
      .form-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .form-input {
        width: 100%;
        height: 80rpx;
        background-color: #f5f7fa;
        border-radius: 12rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        color: #333;
      }
      
      .form-picker {
        width: 100%;
        height: 80rpx;
        background-color: #f5f7fa;
        border-radius: 12rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        
        .picker-value {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
  
  .modal-footer {
    display: flex;
    padding: 20rpx 30rpx 50rpx;
    
    button {
      flex: 1;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      border-radius: 12rpx;
      
      &.cancel-btn {
        background-color: #f5f7fa;
        color: #666;
        margin-right: 20rpx;
      }
      
      &.confirm-btn {
        background: linear-gradient(to right, #6a11cb, #2575fc);
        color: #fff;
      }
    }
  }
}
</style> 